<template>
    <div class='page-main'>
        <CustomForm :formInline="form" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="货物名称">
                <el-input v-model="form.goodsName" placeholder="输入货物名称"></el-input>
            </el-form-item>
            <el-form-item label="货物类型">
                <el-select filterable clearable v-model="form.goodsType" placeholder="选择货物类型" @change="changeGoodsType">
                    <el-option 
                    v-for="(item,index) in goodTypeList" 
                    :key="index" 
                    :label="item" 
                    :value="item"
                    ></el-option>
                </el-select>
            </el-form-item>
        </CustomForm>
        <el-button type="primary" @click="addGoodsEvt" 
            style="margin-bottom: 5px;">添加货物</el-button>
        <el-table :data="list" style="width: 100%" height="620" v-loading="tableloading"  border ref="multipleTable">
            <el-table-column prop="id" label="ID" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="goods_name" label="货物名称" align="center"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="goods_type" label="货物类型" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="add_time" label="添加时间" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="delGoods(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="form.page" :page-sizes="$pageSizeList" :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <el-dialog 
        class="dataDialog" 
        title="添加货物" 
        :visible.sync="addGoodsDialog" 
        :close-on-click-modal="false"
        width="30%" top="10vh">
            <AddGoods v-if="addGoodsDialog" :goodTypeList="goodTypeList" @refresh="addGoodsDialog = false,initial()" />
        </el-dialog>
    </div>
</template>

<script>
import {getGoodsList,getGoodsType,addGoods,deleteGoods} from '@/api/set';
import AddGoods from './components/addGoods';
export default {
  name: "goodsManage",
  components:{
    AddGoods
  },
  data() {
    return {
        addGoodsDialog:false,
        form: {
                goodsName: "",
                goodsType: "", 
                page: 1,
                pageSize: 10,
            },
            goodTypeList:[],
            list: [],
            total: 0,
            tableloading: false,
    };
  },
  mounted(){
        getGoodsType().then(res=>{
            if(res.code == 200){
                this.goodTypeList = res.data;
            }
            
        })
      this.initial()
  },
  methods: {
        async initial(){
            this.tableloading = true;
            let result = await getGoodsList(this.form);
            console.log('result',result);
            this.tableloading = false;

            if (result.code == 200) {
                this.list = result.data.data ? result.data.data : [];
                this.total = result.data.total ? result.data.total : 0;
            }
        },
        resetTable(){
            this.form = {
                goodsName: "",
                goodsType: "", //2024-05-06 / 2024-05-07
                page: 1,
                pageSize: 10,
            };
            this.initial();
        },
        handleSizeChange(pageSize) {
            this.form.pageSize = pageSize;
            this.initial();
        },
        handleCurrentChange(page) {
            this.form.page = page;
            this.initial();
        },
        addGoodsEvt(){
            this.addGoodsDialog = true;
        },
        delGoods(row){
            this.$confirm(`确定要删除该货物吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let result = await deleteGoods({
                    id:row.id
                });
                if(result.code == 200){
                    this.$message.success(result.msg || '删除成功');
                    this.initial();
                }
            }).catch(() => { });
        },
        changeGoodsType(){
            this.form.page = 1;
            this.initial();
        },
        onSubmit() {
            this.form.page = 1;
            this.initial();
        },
  }
};
</script>

<style lang="scss" scoped>
.goodsManage{
}
</style>
